<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>视频直播课</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="css/swiper.min.css">
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/swiper.min.js"></script>
		
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/video.css" />
		<style type="text/css">
			header{
				width: 100%;
				overflow: hidden;
			}
			main{
				overflow: hidden;
			}
			.tabs{
				height: 0.7rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.tabs a{
				flex: 1;
				height: 0.7rem;
				font-size: 0.28rem;
				font-weight: 400;
				line-height: 0.7rem;
				text-align: center;
				border-bottom: 2px solid #D8D8D8;
				color: rgba(51, 51, 51, 1);
			}
			.active{
				border-bottom: 2px solid rgba(238, 193, 79, 1)!important;
			}
			.active{
				color: rgba(238, 193, 79, 1)!important;
			}
			.box{
				display: flex;
			}
			
			
		</style>
	</head>
	<body>
		<div class="container">
			<!-- header -->
			<header>
				<img src="images/top.png">
				<a href="index-rec.html"><span class="iconfont icon-left"></span></a>
			<span class="s1">视频直播课</span>
			<a href="search.html"><span class="iconfont icon-search"></span></a>
			</header>


			<main>
				<div class="tabs">
					<a href="#" class="active">直播</a>
					<a href="#">视频</a>	
				</div>
				<div id="tabs-container" class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<ul class="news-list">
								<div class="box">
									
									
									<div class="main2">
										<div class="m-top">
											<img src="images/pic6.png">
											<a href="">
												<span class="iconfont icon-shipin
									"></span>
												<p>回放</p>
											</a>
										</div>
								
								
										<div class="m-bottom">
											<figure>
												<img src="images/pic8.png">
												<figcaption>
								
								
													<h3>路正先：油画这样画才是最棒的</h3>
								
													<div class="ss">
														<span class="s1">开播时间：03-24 19:00</span>
														<span class="s2">2175人已看</span>
													</div>
								
												</figcaption>
											</figure>
								
								
										</div>
								
								
									</div>
								
								
								
								
								</div>
							</ul>
						</div>
						<div class="swiper-slide">
							<ul class="news-list">
								<div class="box">
									
									
									<div class="main2">
										<div class="m-top">
											<img src="images/pic6.png">
											<a href="">
												<span class="iconfont icon-shipin
									"></span>
												<p>回放</p>
											</a>
										</div>
								
								
										<div class="m-bottom">
											<figure>
												<img src="images/pic8.png">
												<figcaption>
								
								
													<h3>路正先：油画这样画才是最棒的</h3>
								
													<div class="ss">
														<span class="s1">开播时间：03-24 19:00</span>
														<span class="s2">2175人已看</span>
													</div>
								
												</figcaption>
											</figure>
								
								
										</div>
								
								
									</div>
								
								
								
								
								</div>
								
								
							</ul>
						</div>
						
					</div>
				</div>
			</main>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var navSwiper = new Swiper('#header', {
					freeMode: true,
					slidesPerView: 'auto',
					freeModeSticky: true,
				});

				var bannerSwiper = new Swiper('#banner', {
					autoplay: 5000,
					visibilityFullFit: true,
					loop: true,
					pagination: {
						el: '#banner .pagination',
					}
				});

				var announcementSwiper = new Swiper('#announcement', {
					direction: 'vertical',
					loop: true,
					autoplay: {
						delay: 3000,
						disableOnInteraction: false,
					}
				})

				var tabsSwiper = new Swiper('#tabs-container', {
					speed: 500,
					on: {
						slideChangeTransitionStart: function() {
							$(".tabs .active").removeClass('active');
							$(".tabs a").eq(this.activeIndex).addClass('active');
						}
					}
				})
				$(".tabs a").on('click', function(e) {
					e.preventDefault()
					$(".tabs .active").removeClass('active')
					$(this).addClass('active')
					tabsSwiper.slideTo($(this).index())
				})
			}
		</script>
	</body>
</html>
